<template>
  <div class="search-history">
     <van-cell
        title="搜索历史"
     >
        <div v-if="isDeleteShow">
          <span
            @click="$emit('update-histories',[])"
          >全部删除</span>
          &nbsp;&nbsp;
          <span @click="isDeleteShow=false">完成</span>
        </div>
        <van-icon
          v-else
          name="delete"
          @click="isDeleteShow=true"
        />
     </van-cell>
     <van-cell
       :title="history"
       v-for="(history,index) in SearchHistories"
       :key="index"
       @click="onDelete(history, index)"
     >
       <van-icon
         v-show="isDeleteShow"
         name="close"
       />
     </van-cell>
  </div>
</template>

<script>
  export default {
   name: 'SearchHistory',
	 components:{},
	 props:{
     SearchHistories:{
       type:Array,
       required:true
     }
   },
   data () {
     return {
       isDeleteShow:false,//控制搜索历史编辑状态
     }
   },
	 computed: {},
	 watch: {},
	 created () {},
	 mounted() {},
   methods:{
     onDelete(history, index) {
       //如果是删除状态，则执行删除操作
       if(this.isDeleteShow) {
         this.SearchHistories.splice(index, 1)
         //持久化处理
         //1,修改本地存储的数据
         //2.请求接口删除线上数据
         
         //已经在父组件监视了search-histories的变化，所以此处不用提交修改
         // setItem('search-histories',this.SearchHistories)
         return
       }

       //非删除状态，展示搜索结果
       this.$emit('search', history)
     }
   }
  }
</script>

<style scoped lang="less">
</style>
